<template>
	<view :class="['tabs-scroll-box', zClass]">
		<scroll-view scroll-x>
			<view :class="['tabs-scroll', zClass]">
				<view
					v-for="(v,i) in items"
					:key="i"
					:class="['item', current===i?'active':'']"
					@click="onChange(i)">
					<view class="_">
						<badge :dot="v.dot" :count="v.count" :offset="[15, -10, 0, 0]">
							<view class="label">{{v.name}}</view>
						</badge>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default{
		props:{
			'zClass':{type:String},
			'items':{type:Array},
			'value':{type:Number}
		},
		data(){
			return{
				current: 0
			}
		},
		methods:{
			onChange(i){
				if(i===this.current)return false
				this.current = i
				this.$emit('input', i)
			}
		}
	}
</script>

<style lang="scss">
	.tabs-scroll-box{
		overflow: hidden;
		white-space: nowrap;
		width: auto;
		background: #fff;
	}
	.tabs-scroll{
		display: flex;
		height: 92upx;
		width: auto;
		.item{
			display: flex;
			padding: 0 30upx;
			._{
				display: flex;
				align-items: center;
			}
		}
		.active{
			._{
				color: $primary-color;
				border-bottom: solid 2upx $primary-color;
			}
		}
	}
</style>
